import React, { useEffect } from "react";
import NProgress from "nprogress"; //引入进度条
import "nprogress/nprogress.css"; //引入对应的css

// 引入组件
import SideMenu from "../../components/sandbox/SideMenu";
import TopHeader from "../../components/sandbox/TopHeader";
import NewsRouter from "../../components/sandbox/NewsRouter";

import { AutoComplete, Layout } from "antd";

import "./NewsSandBox.css";
const { Content } = Layout;

export default function NewsSandBox() {
  // 进度条的调用
  NProgress.start();
  useEffect(() => {
    // 渲染完成时结束就行了
    NProgress.done();
  });
  return (
    <Layout>
      {/* 左侧菜单栏*/}
      <SideMenu></SideMenu>
      <Layout className="site-layout">
        {/* 右侧的头部 */}
        <TopHeader></TopHeader>
        {/* 内容部分 */}
        <Content
          className="site-layout-background"
          style={{
            margin: "24px 16px",
            padding: 24,
            minHeight: 280,
            overflow: "auto",
          }}
        >
          <NewsRouter />
        </Content>
      </Layout>
    </Layout>
  );
}
